﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.Master" AutoEventWireup="true" CodeBehind="FlexibleSize.aspx.cs" Inherits="ControlExplorer.C1ReportViewer.FlexibleSize" %>

<%@ Register Assembly="C1.Web.Wijmo.Controls.3" Namespace="C1.Web.Wijmo.Controls.C1ReportViewer" TagPrefix="C1ReportViewer" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div id="parentContainerSample" style="width: 720px; height: 475px;">
        <C1ReportViewer:C1ReportViewer runat="server" ID="C1ReportViewer1" FileName="C1ReportViewer/C1ReportXML/BarcodeLabels.xml" ReportName="Product Labels (EAN-13, Label 5096)" Zoom="Fit width" Height="100%" Width="100%" CollapseToolsPanel="True">
        </C1ReportViewer:C1ReportViewer>
    </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Description" runat="server">
    <p>
        <strong>C1ReportViewer</strong> 控件允许您以百分比的方式来灵活得指定Width/Height属性。</p>
    <p>
        本例中使用的属性列表:
    </p>
    <ul>
        <li><strong>FileName</strong> - 报表的相对路径。本例中，这个属性的值被设置为"C1ReportViewer/C1ReportXML/BarcodeLabels.xml"</li>
        <li><strong>ReportName </strong>- 报表的名字。本例中，我们使用"Product Labels (EAN-13, Label 5096)"。</li>
        <li><strong>Zoom </strong>- 页面的缩放值。可接受的缩放值有"actual size", "fit page", "fit width", "fit height" 或者百分比形式的值, 例如 "50%", "70%"。在本例中,我们使用"Fit width"。</li>
        <li><strong>CollapseToolsPanel </strong>- 指定工具面板是否将要被收缩。在本例中，我们设置这个属性为True。</li>
        <li><strong>Height </strong>- 控件的高度。在本例中，我们使用"100%"。</li>
        <li><strong>Width </strong>- 控件的宽度，在本例中，我们使用"100%"。</li>
    </ul>
    <p>
        本例中我们通过客户端脚本改变一个父容器的大小。<strong>C1ReportViewer</strong> 布局会随着父容器大小改变而改变。
    </p>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ControlOptions" runat="server">
    <script language="javascript" type="text/javascript">
        function changeParentSize(w, h) {
            $("#parentContainerSample").width(w).height(h);
            $("#<%=C1ReportViewer1.ClientID%>").c1reportviewer("refresh");
        }
    </script>
    <p>
        改变父容器型号:</p>
    <ul>
        <li><a href="javascript:changeParentSize(320, 240);">把父容器型号改成 320x240px</a><br />
        </li>
        <li><a href="javascript:changeParentSize(600, 400);">把父容器型号改成 600x400px</a><br />
        </li>
        <li><a href="javascript:changeParentSize('100%', '475');">把父容器型号改成 100% x 475px</a><br />
        </li>
        </li>
    </ul>
</asp:Content>
